<template>
  <div class="shop-around">
    <!-- 导航栏 -->
    <van-nav-bar title="我的商圈" left-arrow @click-left="$router.back()" />
    <!-- 搜索栏 -->
    <van-search show-action shape="round" background placeholder="搜索店铺">
      <template #action>
        <a href="http://localhost:8080/#/applyOpenStore">申请开店</a>
        <span>|</span>
        <a href="http://localhost:8080/#/promotion">推广赚钱</a>
      </template>
    </van-search>
    <van-dropdown-menu>
      <van-dropdown-item active-color="#e70201" v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" title="距离" :options="option2"></van-dropdown-item>
      <van-dropdown-item v-model="value2" :options="option3" />
      <van-dropdown-item v-model="value2" :options="option4" />
    </van-dropdown-menu>

    <!-- 店铺展示 -->
    <p>
      您暂时没有个人商圈
      <br />您可以：去
      <a href="#">收藏店铺</a>打造个人商圈
      <br />或是，逛逛
      <a href="#">共享商圈</a>
    </p>
    <!-- <template #tags> -->
    <!-- <van-tag plain type="">定时秒杀</van-tag> -->
    <!-- </template> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      value1: 0,
      value2: 'a',
      option1: [
        { text: '城市', value: 0 },
        { text: '城市名称', value: 1 },
        { text: '城市名称', value: 2 }
      ],
      option2: [
        { text: '距离', value: 'a' },
        { text: '距离', value: 'b' }
      ],
      option3: [
        { text: '活动', value: 'a' },
        { text: '定时秒杀', value: 'b' },
        { text: '打折促销', value: 'c' },
        { text: '临保商品', value: 'd' }
      ],
      option4: [
        { text: '行业', value: 'a' },
        { text: '行业1', value: 'b' },
        { text: '行业2', value: 'c' }
      ]
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.shop-around {
  .van-card {
    background-color: #fff;
    border-width: 1px;
    border-style: solid none;
    border-color: #323233;
  }
  .van-cell {
    .van-icon__image {
      width: 100px;
      height: 100px;
      border: 2px solid #323233;
      border-radius: 50%;
    }
  }
  .van-tag {
    border-radius: none;
  }
}
</style>
